<!-- 
组件名称：ExampleComponent
组件描述：这是一个示例组件，展示了Vue3组件的主要特性和最佳实践
作者：Your Name
创建日期：2024-03-21
-->

<template>
    <div class="example-component">
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import type { PropType } from 'vue'

// // 定义接口
// interface Item {
//     id: number
//     name: string
//     description?: string
// }

// // Props 定义
// const props = defineProps({
// // 必填的字符串属性
// title: {
//     type: String,
//     required: true
// },
// // 可选的数字属性，带默认值
// count: {
//     type: Number,
//     default: 0
// },
// // 可选的数组属性，使用 PropType 指定类型
// initialItems: {
//     type: Array as PropType<Item[]>,
//     default: () => []
// }
// })

// // Emits 定义
// const emit = defineEmits<{
// (e: 'update', value: number): void
// (e: 'item-click', item: Item): void
// }>()

// 响应式状态
const isLoading = ref(false)
const searchQuery = ref('')

// 计算属性
const filteredItems = computed(() => {
return items.value.filter(item => 
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})

// 方法定义
const handleClick = () => {
    ElMessage.success('按钮被点击了！')
    emit('update', props.count + 1)
}

const handleItemClick = (item: Item) => {
    emit('item-click', item)
}

// 异步方法示例
const fetchData = async () => {
    try {
        isLoading.value = true
        // 模拟API调用
        const response = await new Promise<Item[]>(resolve => 
        setTimeout(() => resolve([
            { id: 1, name: 'Item 1' },
            { id: 2, name: 'Item 2' }
        ]), 1000)
        )
        items.value = response
    } catch (error) {
        ElMessage.error('获取数据失败')
        console.error('Error fetching data:', error)
    } finally {
        isLoading.value = false
    }
}

// 监听器
watch(searchQuery, (newValue, oldValue) => {
    console.log('搜索词从', oldValue, '变为', newValue) 
})

// 生命周期钩子
onMounted(() => {
    console.log('组件已挂载')
    fetchData()
})

onBeforeUnmount(() => {
    console.log('组件即将卸载')
    // 清理工作
})

// 暴露给父组件的方法
defineExpose({
    fetchData,
    // handleClick
})
</script>

<style scoped lang="scss">
.example-component {

}


</style> 